<template>
  <view class="commonLim-list">
    <view class="searchclass">
      <view class="left">
        <up-search
          v-model="query.materialCode"
          placeholder="请输入物料编码"
          :clearabled="true"
          :showAction="false"
          @search="handleSearch"
        />
      </view>
      <view class="right">
        <up-button
          type="primary"
          @click="handleSearch"
          size="small"
          shape="circle"
          class="first"
          >搜索</up-button
        >
        <up-button
          type="primary"
          @click="handlecancel"
          size="small"
          shape="circle"
          >重置</up-button
        >
      </view>
    </view>

    <scroll-view
      class="commonLim-listView"
      scroll-y
      @scrolltolower="onScrollToBottom"
    >
      <view v-show="state.rows.length">
        <view
          v-for="(item, index) in state.rows"
          :key="item.id"
          class="commonLim-listView-item"
        >
          <view class="commonLim-listView-item-title">
            <label>{{ item.materialCode }}</label>
            <text>序号：{{ index + 1 }}</text>
          </view>
          <view class="commonLim-listView-item-content">
            <view class="half width100">
              <label>材质:</label>
              <text>{{ item.materialTypeName }}</text>
            </view>
            <view class="half width100">
              <label>规格型号:</label>
              <text>{{ item.specificationName }}</text>
            </view>
            <view class="half width100">
              <lab>订单编号:</lab>
              <text>{{ item.orderCode }}</text>
            </view>
            <view class="half">
              <label>客户名称:</label>
              <text>{{ item.customerName }}</text>
            </view>
            <view class="half">
              <label>业务类型:</label>
              <text>{{ item.businessTypeName }}</text>
            </view>
            <view class="half">
              <label>销售员:</label>
              <text>{{ item.salesmanName }}</text>
            </view>
            <view class="half">
              <label>数量:</label>
              <text>{{ item.produceWeight }}</text>
            </view>
            <view class="half">
              <label>单价:</label>
              <text>{{ item.unitPrice }}</text>
            </view>
            <view class="half">
              <label>金额:</label>
              <text>{{ item.amount }}</text>
            </view>
            <view class="half">
              <label>订单日期:</label>
              <text>{{ item.orderDate }}</text>
            </view>
            <view class="half">
              <label>质量要求/标准:</label>
              <text>{{ item.qualityRequirement }}</text>
            </view>
          </view>
          <view class="commonLim-listView-item-button">
            <view class="box">
              <up-button
                type="primary"
                text="查看详情"
                size="small"
                @click="jumpxiangqing(item)"
              ></up-button>
            </view>
          </view>
        </view>
      </view>
      <up-empty mode="data" v-show="state.rows.length == 0"> </up-empty>
      <up-loadmore
        v-if="state.rows.length"
        :status="loadStatus"
        :icon="true"
        loadmore-text="轻轻上拉获取更多"
        loading-text="努力加载中..."
        nomore-text="没有更多了"
        @loadmore="handleloadMore"
      />
    </scroll-view>
  </view>
</template>

<script setup>
import { searchlist } from "./api.js";
import { useMemberStore } from "@/stores/modules/member";
const memberStore = useMemberStore();
const deprops = defineProps(["applyType", "activityName"]);
const loadStatus = ref("loadmore");
const query = ref({
  page: 0,
  size: 10,
});
const state = reactive({
  rows: [],
  totals: 0,
});
const loadData = async () => {
  console.log(deprops.activityName, "activityName");
  query.value.applyType = deprops.applyType;
  query.value.activityName = deprops.activityName;
  const res = await searchlist(query.value);
  state.rows = [...state.rows, ...res.content];
  state.rows.forEach((item) => {
    const obj = memberStore.pickTypeLists.find(
      (list) => list.value == item.pickType
    );
    item.pickTypeName = obj ? obj.label : "";
  });
  state.totals = res.totalElements;
  if (state.rows.length < state.totals) {
    loadStatus.value = "loadmore"; // 仍可继续上拉
  } else {
    loadStatus.value = "nomore"; // 已全部加载
  }
};
const jumpxiangqing = (item) => {
  uni.navigateTo({
    url: `/pages/TechnicalAndProductionxiangqing/TechnicalAndProductionxiangqing?orderMaterialId=${item.orderMaterialId}&workflowWorkItemId=${item.workflowWorkItemId}&activityName=${deprops.activityName}`,
  });
};

const Consistentlogic = async () => {
  try {
    console.log("加载中");
    uni.showLoading({
      title: "加载中",
    });
    state.rows = [];
    state.totals = 0;
    await loadData();
  } finally {
    uni.hideLoading();
  }
};
const handleSearch = () => {
  query.value.page = 0;
  Consistentlogic();
};
const handlecancel = () => {
  query.value = {
    page: 0,
    size: 10,
  };
  Consistentlogic();
};
const handleloadMore = async () => {
  // 防止重复请求
  if (loadStatus.value === "loading") return;
  loadStatus.value = "loading";
  // 判断是否还有更多数据
  if (state.rows.length < state.totals) {
    loadStatus.value = "loadmore"; // 仍可继续上拉
    query.value.page += 1; // 为下一次请求准备页码
    try {
      await loadData();
    } catch (error) {
      console.log("加载数据失败", error);
    }
  } else {
    loadStatus.value = "nomore"; // 已全部加载
  }
};
function onScrollToBottom() {
  // 当 scroll-view 触底且状态为 loadmore 时手动调用
  if (loadStatus.value === "loadmore") {
    handleloadMore();
  }
}
onLoad(() => {
  uni.setNavigationBarTitle({
    title: deprops.activityName,
  });
  handleSearch();
});
</script>

<style lang="scss" scoped>
</style>